<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      active-text-color="#666666"
    >
      <el-menu-item index="1">关注的专题/文集/连载 0</el-menu-item>
      <el-menu-item index="2">喜欢的文章 0</el-menu-item>
    </el-menu>
    <!-- 骨架屏 -->
    <div>
      <template>
        <el-skeleton
          style="width: 100%"
          animated
          :loading="loading"
        >
          <template slot="template">
            <el-row>
              <el-col :span="16">
                <div style="padding-top: 1.5rem;">
                  <!-- 第一行 -->
                  <el-skeleton-item
                    variant="p"
                    style="width: 50%"
                  />
                  <!-- 第二行 -->
                  <div>
                    <el-skeleton-item
                      variant="text"
                      style="margin-top:0.5rem"
                    />
                  </div>
                  <!-- 第三行 -->
                  <div>
                    <el-skeleton-item
                      variant="text"
                      style="width: 60%;margin-top: 0.5rem;"
                    />
                  </div>
                  <!-- 第四行 -->
                  <div>
                    <el-skeleton-item
                      variant="text"
                      style="width: 75%;margin-top: 0.5rem;"
                    />
                  </div>
                </div>
              </el-col>
              <el-col
                :span="6"
                :offset="2"
              >
                <el-skeleton-item style="width: 140px; height: 100px;margin-top:1.5rem" />
              </el-col>
            </el-row>
          </template>
        </el-skeleton>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "favoritearticle",
  data() {
    return {
      activeIndex: "2",
      loading: true,
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 1200);
  },
};
</script>

<style scoped>
</style>